<script setup>

    //富文本编辑器
    import { QuillEditor } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'


    import { onMounted, ref, watch } from 'vue'
    // @ts-ignore
    import { GetProjectList,GetProjectMemberList,publishNeed,publishBug} from '@/api/project'
    import { ElMessage } from 'element-plus';

    const emit = defineEmits(['workCreated'])

    //判断是否打开addwork组件
    const AddWorkDrawer = ref(false);
    // 打开or关闭addwork组件
     const openWorkDrawer = () => {
        AddWorkDrawer.value =!AddWorkDrawer.value ;
    };

    watch(AddWorkDrawer, () => {
        // 离开页面时，清空表单
        initForm()
        bufferMember.value = []
    })

    onMounted(() => {
        reqProjectList()
    })

    const prioritySelection = [
    // {
    //     value: ' ',
    //     label: '空',
    //     // 是否禁选
    //     disabled: false,
    // },
    {
        value: 'Low',
        label: 'Low',
        // 是否禁选
        disabled: false,
    },{
        value: 'Middle',
        label: 'Middle',
        // 是否禁选
        disabled: false,
    },
    {
        value: 'High',
        label: 'High',
        disabled: false,

    },
    
    // {
    //     value: '乐于拥有',
    //     label: '乐于拥有',
    //     // 是否禁选
    //     disabled: false,
    // },
    ]


    const classify = ref('需求')
    const categorySelection = [
    {
        value: '需求',
        label: '需求',
    },
    {
        value: '缺陷',
        label: '缺陷',
        // 是否禁选
        disabled: false,
    },
    ]

    defineExpose({
        openWorkDrawer,
    })  

    const isOpen = ref(true);

    const ProjectList =ref()

    //获取项目空间数量
    const reqProjectList =() =>{
        const res = GetProjectList();
        res.then((res) => {
            console.log('2312',res.data.data.MyProject);
            ProjectList.value= res.data.data;
            console.log('项目列表',ProjectList);
        })
    }


    //项目成员列表
    const MermberList =ref()
    //获取项目成员列表
    const reqProjectMemberList = (projectId) => {
        const res = GetProjectMemberList(projectId);
        res.then((res) => {
            console.log('项目成员列表',res.data.data);

            MermberList.value= res.data.data;
        })
    }

    const addWorkFormRef = ref(
        {
            projectId: '',
            projectName : 'nihao',
            title: '',
            details: '',
            priority: 'Low',
            handlerArray: [
                {
                id: '1',
                realName: '陈浩'
                },
                {
                id: '2',
                realName: '许易安'
                }
            ],
            startDate: '',
            endDate: ''
        }
    );

    //初始化表单数据
    const initForm = () => {
        addWorkFormRef.value = {
            projectId: '',
            projectName : '',
            title: '',
            details: '',
            priority: '',
            handlerArray: [
                {
                id: '',
                realName: ''
                },
            ],
            startDate: '',
            endDate: ''
        }
    }
    

    //监听项目id变化请求项目成员列表
     watch(() => addWorkFormRef.value.projectId, (newVal) => {
        if(newVal!==''){
            console.log('在监听');
            reqProjectMemberList(addWorkFormRef.value.projectId)
            //当更换项目清空选择的项目成员
            bufferMember.value = []
        }
       
    })
    
    //发送创建工作项请求
    const createWork = (data) => {
        if (classify.value === '需求') {
            const res = publishNeed(data);
            res.then(() => {
                ElMessage({
                    showClose: true,
                    message: '需求创建成功',
                    type: 'success'
                })
                AddWorkDrawer.value = false;
                emit('workCreated')
            });
        } else if (classify.value === '缺陷') {
            const res = publishBug(data);
            res.then((res) => {
                ElMessage({
                    showClose: true,
                    message: '缺陷创建成功',
                    type: 'success'
                })
                console.log('创建缺陷成功', res);
                AddWorkDrawer.value = false;
                emit('workCreated')
            });
        }
    }


    //暂存选择项目成员 只有id
    const bufferMember = ref([])
    //将选择项目成员列表根据id转化成对象包含id和realName传出
    const transformSelectedMembers = () => {
        const selectedMembers = bufferMember.value.map(id => MermberList.value.find(member => member.id === id));
        addWorkFormRef.value.handlerArray = selectedMembers;
    }

    const content = ''

</script>


<template>
    <el-dialog 
        :modal="true" 
        :close-on-click-modal="false" 
        v-model="AddWorkDrawer" 
        class="work-dialog"
        :title="'快速创建'"  
        top="15vh">
        <div class="dialog-header">
            <div class="select-group">
                <el-select v-model="addWorkFormRef.projectId" class="project-select">
                    <template #prefix>
                        <svg class="select-icon" t="1714008342403" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2725" width="200" height="200"><path d="M937.668466 266.25075l0.012798 491.511298-425.681264 245.74925 0.012797-491.511298 425.655669-245.74925z" fill="#FF505E" p-id="2726"></path><path d="M512 1024a20.475905 20.475905 0 0 1-20.475905-20.475905V512a20.475905 20.475905 0 0 1 10.237953-17.737253l425.655668-245.710857a20.475905 20.475905 0 0 1 30.713858 17.737252v491.472906a20.475905 20.475905 0 0 1-10.237953 17.737252L522.237952 1021.235753a20.475905 20.475905 0 0 1-10.237952 2.764247z m20.475905-500.175165v444.224755l384.716656-222.112377V301.712458z" fill="#333333" p-id="2727"></path><path d="M512 1024a20.475905 20.475905 0 0 1-10.237952-2.75145L76.093581 775.524895a20.475905 20.475905 0 0 1-10.237952-17.737253V266.186763a20.475905 20.475905 0 0 1 30.713857-17.724455l425.668466 245.710857a20.475905 20.475905 0 0 1 10.237953 17.737253v491.613677a20.475905 20.475905 0 0 1-20.475905 20.475905zM106.807439 745.924415l384.716656 222.125175V523.824835L106.807439 301.69966z" fill="#333333" p-id="2728"></path><path d="M512.012797 532.475905a20.475905 20.475905 0 0 1-10.237952-2.75145L76.093581 283.962408a20.475905 20.475905 0 0 1 0-35.461708l425.681264-245.710858a20.475905 20.475905 0 0 1 20.475905 0l425.642871 245.774845a20.475905 20.475905 0 0 1 0 35.474505l-425.655669 245.710858a20.475905 20.475905 0 0 1-10.225155 2.725855zM127.283343 266.186763l384.729454 222.163567 384.70386-222.09958L512.012797 44.125575z" fill="#333333" p-id="2729"></path></svg>
                        <span>空间</span>
                    </template>
                    <template #header>
                        协作空间
                    </template>
                    <el-option
                        v-for="item in ProjectList"
                        :key="item.id"
                        :label="item.projectName"
                        :value="item.id"
                        />
                </el-select>

                <el-select v-model="classify" class="category-select">
                    <template #prefix>
                        <svg class="select-icon" t="1714028819890" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1489" width="200" height="200"><path d="M176 224h672c12.8 0 24-11.2 24-24S860.8 176 848 176H176c-12.8 0-24 11.2-24 24S163.2 224 176 224zM848 384H176c-12.8 0-24 11.2-24 24S163.2 432 176 432h672c12.8 0 24-11.2 24-24S860.8 384 848 384zM416 592H176c-12.8 0-24 11.2-24 24S163.2 640 176 640h240c12.8 0 24-11.2 24-24S428.8 592 416 592zM416 800H176c-12.8 0-24 11.2-24 24S163.2 848 176 848h240c12.8 0 24-11.2 24-24S428.8 800 416 800zM777.6 744c19.2-24 30.4-54.4 30.4-86.4 0-75.2-60.8-137.6-137.6-137.6-75.2 0-137.6 60.8-137.6 137.6 0 75.2 60.8 137.6 137.6 137.6 25.6 0 49.6-6.4 68.8-19.2l67.2 67.2c4.8 4.8 11.2 6.4 17.6 6.4s12.8-1.6 17.6-6.4c9.6-9.6 9.6-24 0-33.6l-64-65.6z m-195.2-86.4c0-49.6 40-89.6 89.6-89.6 49.6 0 89.6 40 89.6 89.6 0 49.6-40 89.6-89.6 89.6-49.6-1.6-89.6-41.6-89.6-89.6z" p-id="1490"></path></svg>
                        <span>分类</span>
                    </template>
                    <el-option
                    v-for="item in categorySelection"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                    />
                </el-select>
            </div>
        </div>

        <div class="form-content">
            <el-input 
                class="title-input"
                placeholder="请输入标题" 
                v-model="addWorkFormRef.title">
            </el-input>

            <div class="form-row">
                <div class="form-item">
                    <span class="form-label"> 
                        <img class="label-icon" src="@/img/person.png" alt="">
                        处理人
                    </span>
                    <el-select 
                        v-model="bufferMember" 
                        @change="transformSelectedMembers" 
                        multiple 
                        collapse-tags 
                        :max-collapse-tags="2" 
                        class="handler-select">
                        <template #header>
                            选择处理人
                        </template>
                        <el-option
                            v-for="item in MermberList"
                            :key="item.id"
                            :label="item.realName"
                            :value="item.id"
                        />
                    </el-select>
                </div>
                    
                <div class="form-item">
                    <span class="form-label">
                        <svg class="label-icon" t="1714054084539" viewBox="0 0 1191 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5772" width="18" height="18"><path d="M1191.159364 85.068631a84.870105 84.870105 0 0 1-85.068631 85.068632H85.068631A85.962001 85.962001 0 0 1 0 85.068631 85.366421 85.366421 0 0 1 85.068631 0h1021.915471A84.671578 84.671578 0 0 1 1191.159364 85.068631zM87.550213 424.449787H863.590539a87.550213 87.550213 0 0 1 0 175.100426H87.550213a87.550213 87.550213 0 1 1 0-175.100426z m0 424.449786H565.800698a87.550213 87.550213 0 1 1 0 175.100427H87.550213a87.550213 87.550213 0 1 1 0-175.100427z" fill="#2c2c2c" p-id="5773"></path></svg>
                        优先级
                    </span>
                    <el-select v-model="addWorkFormRef.priority" class="priority-select">
                        <el-option
                            v-for="item in prioritySelection"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                        />
                    </el-select>
                </div>
            </div>

            <transition name="fade">
                <div v-show="isOpen" class="editor" ref="quillEditor">
                    <p class="editor-title">
                        <svg class="editor-icon" t="1714194468250" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3457" width="18" height="18"><path d="M534.755556 938.666667l142.222222-119.466667h187.733333c51.2 0 96.711111-45.511111 96.711111-96.711111V261.688889c0-56.888889-45.511111-96.711111-96.711111-96.711111H210.488889c-56.888889 0-96.711111 45.511111-96.711111 96.711111v460.8c0 56.888889 45.511111 96.711111 96.711111 96.711111H398.222222l136.533334 119.466667z m0 45.511111L381.155556 853.333333h-170.666667c-73.955556 0-130.844444-56.888889-130.844445-130.844444V261.688889c0-73.955556 56.888889-130.844444 130.844445-130.844445h648.533333c73.955556 0 130.844444 56.888889 130.844445 130.844445v460.8c0 73.955556-56.888889 130.844444-130.844445 130.844444h-170.666666l-153.6 130.844445z m-244.622223-625.777778h489.244445c11.377778 0 17.066667 5.688889 17.066666 17.066667 0 11.377778-5.688889 17.066667-17.066666 17.066666H290.133333c-5.688889 0-17.066667-5.688889-17.066666-17.066666 0-5.688889 11.377778-17.066667 17.066666-17.066667z m0 130.844444h290.133334c11.377778 0 17.066667 5.688889 17.066666 17.066667 0 11.377778-5.688889 17.066667-17.066666 17.066667H290.133333c-5.688889 0-17.066667-5.688889-17.066666-17.066667 0-5.688889 11.377778-17.066667 17.066666-17.066667z m0 136.533334h489.244445c11.377778 0 17.066667 5.688889 17.066666 17.066666 0 11.377778-5.688889 17.066667-17.066666 17.066667H290.133333c-11.377778 0-17.066667-5.688889-17.066666-17.066667 0-11.377778 11.377778-17.066667 17.066666-17.066666z m0 0" p-id="3458"></path></svg>
                        详细描述
                    </p>
                    <quill-editor v-model:content="content" theme="snow" contentType="html" ref="editorRef"></quill-editor>
                </div>
            </transition>
                
            <div class="dialog-footer">
                <div class="action-buttons">
                    <el-button type="primary" @click="createWork(addWorkFormRef)">创建</el-button>
                    <el-button @click="openWorkDrawer">取消</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<style scoped lang="scss">
.work-dialog {
    :deep(.el-dialog) {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.dialog-header {
    margin-bottom: 24px;
}

.select-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.project-select {
    width: 240px;
}

.category-select {
    width: 160px;
}

.select-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.form-content {
    padding: 0 20px;
}

.title-input {
    margin-bottom: 24px;
    width: 100%;
    
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 1px #dcdfe6;
        transition: all 0.3s;
        
        &:hover {
            box-shadow: 0 0 0 1px #409eff;
        }
        
        &.is-focus {
            box-shadow: 0 0 0 1px #409eff;
        }
    }
}

.form-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.form-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-label {
    display: flex;
    align-items: center;
    color: #606266;
    font-size: 14px;
}

.label-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.handler-select {
    min-width: 180px;
}

.priority-select {
    width: 160px;
}

.editor {
    margin: 24px 0;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
    
    &:hover {
        border-color: #409eff;
    }
}

.editor-title {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 1px solid #dcdfe6;
    color: #606266;
    font-size: 14px;
}

.editor-icon {
    margin-right: 8px;
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ebeef5;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}
</style>

<style lang="scss">
.el-dialog__header {
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #ebeef5;
}

.el-dialog__body {
    padding: 24px;
}

.ql-container.ql-snow {
    min-height: 200px;
    border: none;
}

.ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid #dcdfe6;
    padding: 8px 16px;
}

.editor {
    :deep(.ql-editor) {
        min-height: 200px;
        padding: 16px;
        
        &:focus {
            outline: none;
        }
    }
}

.el-select {
    .el-input__wrapper {
        box-shadow: 0 0 0 1px #dcdfe6;
        transition: all 0.3s;
        
        &:hover {
            box-shadow: 0 0 0 1px #409eff;
        }
        
        &.is-focus {
            box-shadow: 0 0 0 1px #409eff;
        }
    }
}
</style>
